<template>
  <div>
    <div class="r">
      <div id="main3"></div>
    </div>
    <div class="r">
      <div id="main4"></div>
    </div>
    <div class="r">
      <div id="main5"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";
export default {
  data() {
    return {};
  },
  mounted() {
    this.e();
      let that=this
    let p = new Promise((resolve, reject) => {
      $.ajax({
        url: `https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign`,
        dataType: "jsonp",
        success:(res)=> {
          resolve(res);
        },
        error:(err)=> {
          reject(err);
        },
      });
    });
    p.then((res) => {//右一
         console.log(res);
          let data = JSON.parse(res.data);
      console.log(data.foreignList,321312);
      let rightDom1 = document.getElementById("main3");
      let right1 = that.rightOne(data.foreignList.slice(0,5));
      that.addCharts(rightDom1, right1);

      //右二
      let rightDom2= document.getElementById("main4");
      let right2 = that.rightTwo(data.globalDailyHistory);
      that.addCharts2(rightDom2, right2);
   });
    p.then((res) => {//右三
         console.log(res);
          let data = JSON.parse(res.data);
      console.log(data.importStatis.TopList,'右三');
      let rightDom3 = document.getElementById("main5");
      let right3 = that.rightThree(data.importStatis.TopList);
      that.addCharts3(rightDom3, right3);
    });
  },
  methods: {
     addCharts2(dom,option){//右二
        var myChart = echarts.init(dom);
        myChart.setOption(option);//监听
          window.addEventListener("resize", function () {
        myChart.resize();
      });
     },
     rightTwo(value){
           let  xAxis=[];
       let  yAxis=[];
       let zy=[]
       for(let item of value){
        xAxis.push(item.date)
        yAxis.push(item.all.dead)
        zy.push(item.all.heal)
       }
         let option={
           title: {
          text: "世界每周新增治愈和死亡人数",
          left: "20%",
          top: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
          legend: {
      top:'15%',
        data: ['死亡人数', '治愈人数'],
            textStyle:{//图例文字的样式
            color:'#ccc',
            fontSize:10
        }
    },
          grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            data:xAxis,
         
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 21,//可控制x轴数据标签的显示
              textStyle: {
                color: "#fff",
              },
              margin: 10,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            data:zy,
            // axisTick: {
            //   show: false,
            // },
            axisLine: {
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "死亡人数",
            type: "line",
            data: yAxis,
            symbolSize: 3,
            symbol: "circle",
            smooth: true,
            // lineStyle: {
            //     color: '#fe9a8b'
            // },
            itemStyle: {
              normal: {
                color: "#fe9a8b",
                borderColor: "#fe9a8b",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fe9a8b",
                    },
                    {
                      offset: 0.4,
                      color: "#fe9a8b",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#fe9a8b",
                borderWidth: 2,
              },
            },
          },
          {
            name: "治愈人数",
            type: "line",
            // data: [5, 12, 11, 4, 25, 16, 1],
            data:zy,
            symbolSize: 6,
                   symbol: "circle",
            smooth: true,
            // lineStyle: {
            //     color: '#9E87FF'
            // },
            itemStyle: {
              normal: {
                color: "#9E87FF",
                borderColor: "#9E87FF",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9E87FF",
                    },
                    {
                      offset: 0.4,
                      color: "#9E87FF",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#9E87FF",
                borderWidth: 1,
              },
            },
          },
        ],
       }
       return option
     },
     addCharts3(dom,option){//右三
        var myChart = echarts.init(dom);
        myChart.setOption(option);//监听
          window.addEventListener("resize", function () {
        myChart.resize();
      });
     },
     rightThree(value){//右三
      let name=[];
      let sj=[];
      for (let item of value){
         name.push(item.province)
         sj.push(item.importedCase)
      }
    let option={
         grid: {
          left: "3%",
          right: "10%",
          bottom: "40%",
          top: "20",
          containLabel: true,
        },
        title: {
          top: "0%",
          left: "70px",
          text: "境外输入病情top10省份",
          textStyle: {
            align: "center",
            color: "white",
            fontSize: 15,
            fontWeight: 300,
          },
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            // radius: [50, 250],
            radius: [10, 40],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value:sj[0], name:name[0] },
              { value:sj[1], name:name[1] },
              { value:sj[2], name:name[2] },
              { value:sj[3], name:name[3] },
              { value:sj[4], name:name[4] },
              { value:sj[5], name:name[5] },
              { value:sj[6], name:name[6] },
              { value:sj[7], name:name[7] },
              { value:sj[8], name:name[8] },
              { value:sj[9], name:name[9] },
            ],
          },
        ],
    }
    return option
     },
    addCharts(dom,option){//右一
        var myChart = echarts.init(dom);
        myChart.setOption(option);//监听
          window.addEventListener("resize", function () {
        myChart.resize();
      });
     },
     rightOne(value){//右一
        let titlename=[];
        let kuang=[];
        for (let item of value){
          titlename.push(item.name)
          kuang.push(item.date)
        }
          var valdata = [683, 234, 234, 523, 345];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
        let option={
              title: {
                         top: "0%",
                         left: "100px",
                         text: "主要疫情国家治愈率",
                         textStyle: {
                              align: "center",
                              color: "white",
                              fontSize: 15,
                              fontWeight: 400,
                         },
                    },
        grid: {
          left: "5%",
          top: "20%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        // backgroundColor: "#0e2147",
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              // formatter: function(value, index) {
              //     return [
              //         '{lg|' + (index + 1) + '}' + '{title|' + value + '} '
              //     ].join('\n')
              // },
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  // padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            // data: data,
            data: kuang,
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            }
          }
        ],
        };
     
        return option
      },//end
    e() {
      //右二
      var chartDom = document.getElementById("main4");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        // backgroundColor: '#fff',
        title: {
          text: "世界每周新增治愈和死亡人数",
          left: "20%",
          top: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            data: ["A", "B", "C", "D", "E", "F", "G"],
            axisLine: {
              lineStyle: {
                color: "#ddd",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#c56790",
              },
              margin: 15,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#c56790",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "S",
            type: "line",
            // data: [13,10,3,12,15,30,7],
            data: [13, 10, 3, 12, 15, 30, 7],
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            // lineStyle: {
            //     color: '#fe9a8b'
            // },
            itemStyle: {
              normal: {
                color: "#fe9a8b",
                borderColor: "#fe9a8b",
              },
            },
            // areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: '#fe9a8bb3'
            //             },
            //             {
            //                 offset: 1,
            //                 color: '#fe9a8b03'
            //             }
            //         ])
            // },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fe9a8b",
                    },
                    {
                      offset: 0.4,
                      color: "#fe9a8b",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#fe9a8b",
                borderWidth: 2,
              },
            },
          },
          {
            name: "M",
            type: "line",
            data: [5, 12, 11, 4, 25, 16, 1],
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            // lineStyle: {
            //     color: '#9E87FF'
            // },
            itemStyle: {
              normal: {
                color: "#9E87FF",
                borderColor: "#9E87FF",
              },
            },
            // areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: '#9E87FFb3'
            //             },
            //             {
            //                 offset: 1,
            //                 color: '#9E87FF03'
            //             }
            //         ])
            // },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9E87FF",
                    },
                    {
                      offset: 0.4,
                      color: "#9E87FF",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#9E87FF",
                borderWidth: 2,
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    }, //end
   
  },
};
</script>

<style lang="scss">
.r {
  width: 510px;
  height: 310px;
  margin-top: 10px;
  position: relative;
  // margin-left: 10px;
  background: linear-gradient(to top, #306eef, #306eef) left top no-repeat,
    /*上左*/ linear-gradient(to right, #306eef, #306eef) left top no-repeat,
    /*左上*/ linear-gradient(to left, #306eef, #306eef) right top no-repeat,
    /*上右*/ linear-gradient(to bottom, #306eef, #306eef) right top no-repeat,
    /*上右*/ linear-gradient(to left, #306eef, #306eef) left bottom no-repeat,
    /*下左*/ linear-gradient(to bottom, #306eef, #306eef) left bottom no-repeat,
    /*左下*/ linear-gradient(to top, #306eef, #306eef) right bottom no-repeat,
    /*下右*/ linear-gradient(to left, #306eef, #306eef) right bottom no-repeat; /*右下*/
  background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
  #main3 {
    width: 500px;
    height: 300px;
    left: 5px;
    top: 5px;
    position: absolute;
  }
  #main4 {
    width: 500px;
    height: 300px;
    left: 5px;
    top: 5px;
    position: absolute;
  }
  #main5 {
    width: 400px;
    height: 300px;
    left: 45px;
    top: 20px;
    position: absolute;
  }
}
</style>